{extend name="common/base" /}

{block name="main"}
<div class="body-content">
	<form class="layui-form">
		<div class="layui-input-inline" style="width:300px;">
			<input type="text" name="keywords" placeholder="昵称/真实姓名/手机号" class="layui-input" autocomplete="off"/>
		</div>
		<div class="layui-input-inline" style="width:120px;">
			<input type="text" class="layui-input" id="start_time" readonly placeholder="注册开始时间" name="start_time">
		</div>
		~
		<div class="layui-input-inline" style="width:120px;">
			<input type="text" class="layui-input" id="end_time" readonly placeholder="注册结束时间" name="end_time">
		</div>
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchUser">提交搜索</button>
	</form>
	<table class="layui-table" id="userGroupTable" lay-filter="userGroupTable">
		<thead>
			<tr>
				<th>ID</th>
				<th>分组名</th>
				<th>备注</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			{foreach $group as $key => $vo}
			<tr>
				<td>{$vo.id}</td>
				<td>{$vo.name}</td>
				<td>{$vo.remark}</td>
				<td>
					<script type="text/html">
						
					</script>
				</td>
			</tr>
			{/foreach}
		</tbody>
	</table>
</div>
{/block}



{block name="script"}
<script type="text/javascript">
	layui.use(['table', 'form', 'laydate', 'layer'], function () {
		var table = layui.table, form = layui.form, laydate = layui.laydate, layer = layui.layer;

		// table.init('userGroupTable', {
		// 	height: 400
		// });
		// 实例化表格
		// var tableIns = table.render({
		// 	elem: "#userGroupTable",
		// 	title: "用户分组",
		// 	toolbar: "",
		// 	url: '/admin/group/list', // 数据接口
		// 	page: true, // 开启分页
		// 	limit: 10,
		// 	cols: [
		// 		[
		// 			{ field: 'id', title: 'ID', align: 'center', width: 90 },
		// 			{ field: 'name', title: '分组名', align: 'center'},
		// 			{ field: 'remark', title: '备注', aligin: 'center'},
		// 			{ field: 'right', title: '操作', aligin: 'left', toolbar: '#userTool' }
		// 		]
		// 	]
		// });

		// 监听表格工具行
		table.on('tool(userTable)', function (obj) {
			var data = obj.data;
			if (obj.event === 'view') {
				layer.alert("view");
			} else if (obj.event === 'edit') {
				layer.alert("del");
			}
		});

		// 监听搜索
		form.on('submit(searchUser)', function (data) {
			tableIns.reload({
				where: {
					keywords: data.field.keywords,
					start_time: data.field.start_time,
					end_time: data.field.end_time
				},
				page: {
					curr: 1
				}
			});
			return false;
		});

		/* 渲染日期时间组件 */
		laydate.render({
			elem: '#start_time',
			type: 'date',
		});
		laydate.render({
			elem: '#end_time',
			type: 'date',
		});


	});
</script>
{/block}